/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2019-07-03 15:00:45
 * @Description: 首页-应用工具-APP评论信息检索-详情页
 *               新窗口打开的独立页面
 */
@import "@/assets/style/global.scss";

@mixin menuSideItem($item-name: comprehensive) {
    &.#{$item-name} {
        background: url('./images/'+ $item-name +'.png') no-repeat center;
    }
}

@mixin menuSideItemActive($item-name: comprehensive) {
    &.#{$item-name} {
        background: url('./images/'+ $item-name +'-active.png') no-repeat center;
    }
}

.menuActive {
    @include menuSideItemActive(comprehensive);
    @include menuSideItemActive(relationObj);
    @include menuSideItemActive(useCrowd);
    @include menuSideItemActive(warning);
    @include menuSideItemActive(comment);
    @include menuSideItemActive(changeLog);
}

.app-info-retrieval-details {
    display: flex;
    min-height: calc(100vh - 70px);
    background: transparent;
    .left-side {
        width: 260px !important;
        max-width: 260px !important;
        background-color: $sideBgColor;
        flex: none !important;
    }

    .side-list {
        width: 100%;
        background-color: $sideBgColor;

        &-item {
            height: 56px;
            line-height: 56px;
            text-align: center;

            .item-icon {
                position: relative;
                left: -15px;
                top: 4px;
                display: inline-block;
                width: 24px;
                height: 24px;

                @include menuSideItem(comprehensive);
                @include menuSideItem(relationObj);
                @include menuSideItem(useCrowd);
                @include menuSideItem(warning);
                @include menuSideItem(comment);
                @include menuSideItem(changeLog);
            }

            a {
                color: $gray;
                display: block;
            }

            .active {
                border-left: 4px solid $blue;
                background-color: $bgColor;
                color: $grayLight;

                .allow-icon {
                    position: relative;
                    top: 1px;
                    left: 55px;
                    display: inline-block;
                    width: 8px;
                    height: 13px;
                    background: url(./images/allow_right_icon.png) no-repeat center;
                }

                .item-icon {
                    @extend .menuActive;
                }
            }

            &:hover {
                color: $grayLight;

                .item-icon {
                    @extend .menuActive;
                }
            }
        }
    }

    .APPIR-details {
        background-color: $bgColor;
        padding: 30px;
        .top{
            display: flex;
            justify-content: space-between;
            background: #2c303d;
            padding: 10px 20px;
            box-shadow: 0px 0px 16px #171c25;
            align-items: center;
            .left{
                display: flex;
                align-items: center;
                .logo{
                    width: 50px;
                    height: auto;
                    margin-right: 20px;
                }
                .name{
                    color: $blue;
                    margin-right: 60px;
                    font-weight: bold;
                }
                .tip{
                    margin-right: 40px;
                }
            }
            .right{
                .btn{
                    text-align: center;
                    padding: 2px 26px;
                    border: 1px solid #476ca7;
                    border-radius: 4px;
                    margin: 0 18px;
                    cursor: pointer;
                    &:hover,
                    &.active{
                        color: $grayLight;
                        background: #465270;
                        border: 1px solid #44b7ff;
                    }
                }
            }
        }
        // 子页面右侧栏通用列表（三列）样式
        .common-side-right-lists {
            width: 100%;
            li{
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid #464b54;
                $height: 50px;
                line-height: $height;
                height: $height;
                >span{
                    display: block;
                    text-align: center;
                    flex-grow: 1;// width: 33.333%

                }
            }
            .list-title{
                border-bottom: none;
            }
            .list-item{
                color: $grayLight;
                .op-btn{
                    display: inline-block;
                    padding: 0 4px 0 16px;
                    cursor: pointer;
                    margin: 0 3px;
                    &.delete-btn{
                        color: $yellow;
                        background: url(./images/delete-icon.png) no-repeat left center;
                    }
                    &.detail-btn{
                        color: $blue;
                        background: url(./images/detail-icon.png) no-repeat left center;
                    }
                }
            }
        }
    }

}
/**
*  详情页表格页面-公用样式
*  包括：
*       预警中心
*       评论信息
*       变更记录
*/

.APPIR-common-table-page {
    width: 100%;
    background: #2c303d;
    margin-top: 30px;
    padding: 30px;
    min-height: 400px;

    .filter-top {
        display: flex;
        justify-content: flex-end;
        $marginRight: 20px;

        .ant-select {
            color: $gray;

            .ant-select-selection {
                background-color: transparent;
                border: 1px solid $borderColor;
                margin-right: $marginRight;
            }

            .ant-select-arrow {
                color: $blue;
            }
        }

        .ant-calendar-picker {
            margin-right: $marginRight;
        }

        .ant-calendar-range-picker-separator,
        .ant-calendar-picker-icon,
        .ant-calendar-range-picker-input {
            color: $gray;
        }

        .ant-input {
            background: transparent;
            border: 1px solid $borderColor;
            color: $gray;
        }

        .ant-input-search-icon {
            color: $gray;
        }

        .ant-btn {
            background: transparent;
            color: $gray;
            border: 1px solid $borderColor;
            margin-left: $marginRight;

            &:hover,
            &.active {
                color: $grayLight;
                background: #465270;
                border: 1px solid #44b7ff;
            }
        }

    }

    .lists-table {
        width: 100%;
        border-collapse: collapse;

        th,
        td {
            text-align: center;
            $height: 50px;
            line-height: $height;
            height: $height;
        }

        tr {
            border-bottom: 1px solid #2c3a3f;
        }

        .op-btn {
            color: $blue;
            cursor: pointer;
        }

    }

    .table-pagination {
        text-align: right;
        margin-top: 20px;
    }
}

.ant-select-dropdown {
    background-color: #27314a;
    border: 1px solid $borderColor;

    .ant-select-dropdown-menu-item {
        color: $gray;
        &:hover{
            background-color: #262b38;
            color: $blue;
        }
    }
    .ant-select-dropdown-menu-item-selected{
        background-color: #262b38;
        color: $blue;
    }
    .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled){
        background-color: #262b38;
        color: $blue;
    }
}
